<template>
    <li class="dianping-li">
      <div class="dianping-info">
        <div class="dianping-commentuser">
          <span class="dianping-username">{{dianpingItem.userName}}</span>
          <span class="dianping-start">
            <i class="startlevel-gain iconfont" >{{ _.join(new Array(dianpingItem.start+1), '&#xe6b0;') }}</i>
            <i class="startlevel-total iconfont">&#xeeff;&#xeeff;&#xeeff;&#xeeff;&#xeeff;</i>
          </span>
          <span class="dianping-time">{{dianpingItem.dianpingTime}}</span>
        </div>

        <div class="dianping-comment">
          <div class="comment-content content-reduce" :class="{'content-reduce':!isExpendContent,'content-expend':isExpendContent}">
            {{dianpingItem.dianpingContent}}
          </div>
          <div class="comment-descmore" @click="expendContent">
            <span class="iconfont" v-html="changeArrow">&#xe62e;</span>
          </div>
        </div>

        <!--<dianping-swiper :list="getImgList()"></dianping-swiper>-->
        <div class="dianping-imgs">
            <img class="dianping-img" v-for="(imgItem,index) of dianpingItem.dianpingImgs" :src="imgItem" :key="index" @click="handleImgClick"/>
        </div>

        <fade-animation>
          <common-gallary v-show="showGallary" @close="handleGallaryClose" :imgs="dianpingItem.dianpingImgs"></common-gallary>
        </fade-animation>
      </div>
    </li>
</template>

<script>
import CommonGallary from 'common/gallary/gallary.vue'
import FadeAnimation from 'common/fade/fadeAnimation'
export default {
  props: {
    dianpingItem: Object
  },
  data () {
    return {
      isExpendContent: false,
      contentArrow: '',
      showGallary: false
    }
  },
  methods: {
    expendContent: function () {
      this.isExpendContent = !this.isExpendContent
    },
    handleImgClick: function () {
      this.showGallary = true
    },
    handleGallaryClose: function () {
      this.showGallary = false
    }
  },
  components: {
    CommonGallary,
    FadeAnimation
  },
  computed: {
    changeArrow: function () {
      //  监听器改变上下箭头 是否展开内容？向上箭头： 向下箭头
      return this.isExpendContent ? '&#xe62c;' : '&#xe62e;'
    }

  }
}
</script>

<style lang="stylus" scoped>
  .dianping-info
    padding :0.2rem 0.3rem 0 0.3rem
    .dianping-commentuser
      padding-right :0.1rem
      padding-left :0.1rem
      .dianping-username
        font-size :0.24rem
        color :#616161
        margin-right :0.1rem
      .dianping-start
        position :relative
        width :1.66rem
        .startlevel-gain
          color :#ffb436
          z-index :2
        .startlevel-total
          color :#e0e0e0
        .startlevel-gain,.startlevel-total
          position: absolute
          top: 0
          left :0
      .dianping-time
        position: absolute
        right: .4rem
        color: #9e9e9e
    .dianping-comment
      margin-top: .2rem
      line-height: .4rem
      .comment-content
        margin-bottom :0.3rem
        &.content-reduce
          overflow: hidden
          height: 100px
        &.content-expend
          overflow: auto
          height: auto
      .comment-descmore
        height: .2rem
        color: #9e9e9e
        line-height: .2rem
        margin-bottom :0.3rem
        text-align: center
    .dianping-imgs
      margin-bottom :0.3rem
      white-space: nowrap
      word-break: keep-all
      max-height: 2.2rem
      overflow-x: auto
      .dianping-img
        display: inline-block
        margin-top :0
        margin-right :0.04rem
        height :1.4rem
        width :1.4rem
</style>
